<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/my.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="/static/layer/layer/layer.js"></script>
	<style>
		#cart{background-color:#f7f7f7;
			position: fixed;
			z-index: 20;
			opacity: 0.9;
			width:100%;
			max-width: 799px;
			left: 0;bottom: 0px;
			1height: 50px;
			line-height: 50px;
			margin: auto;
			border-top: 1px solid #ccc;
			transition: 0.1s;
		}

		.row div{text-align: center;padding: 0;border-right: 0 solid #ccc;}
		.row span{font-size: 1.2rem;}
		.tj,.price,#cart_num{background-color: #f60;color: #fff;text-align: center;position: absolute;}
		.tj{right: -40px;width: 120px;opacity: 1;transform:rotate(45deg);}
		.price{ight: 4px;bottom: 4px;border: 0 solid #ff0;border-radius: 14px;width: 60px;right: 4px;}

		.card{width: 240px; margin: 10px;display:inline-grid;cursor: pointer;overflow:hidden;border: 1px solid #ccc;transition: 0.1s;border-radius: 0  0px 0 0px;flex-grow: 1;}
		.card:hover{transform: rotate(-0deg) scale(1.03);z-index: 20;box-shadow: 1px 1px 10px #f60;border-color: #f60;  }
		.list-group-item{cursor: pointer;transition: 0.3s;background-color: initial;}
		.item-select{background-color: #f60;z-index: 20;color: #fff;}
		.btns{position: absolute;margin:0 auto;}
		
		#cart_num{
		    width: 26px;
		    height: 26px;
		    display: inline-block;
		    line-height: 26px;
		    border-radius: 50%;
		    top: -2px;
		    left:50%;
		}
		#cat_list{padding: 0;position: fixed;width: 25%;max-width: 150px;height: 100%;overflow-y: scroll;}


	</style>
</head>
<body style="background-image: url({$sys.background_image});">
	<div id="mask"></div>

	<div class="page" style="width: 100%;margin:0 auto;overflow-y:scroll;">
		<input id="uid" type="hidden" value="{$logonid}"/>

		<div id="top" class="row" >
			<div class="col-1 " >
				{if $utype==1}
				<a href="/" alt="Home page">
					<span class="bi-chevron-left" id="home" style="color:#0d6efd"></span>
				</a>
				{else}
				<a href="/index.php/customer/aboutme" alt="Home page">
					<span class="bi-person-circle" style="color:#0d6efd"></span>
				</a>				
				{/if}
			</div>
			<div class="col-10" >
				<c class="text-primary">
				{if $language==1}
					{$orderTitle}
				{elseif $language==2}
					ភ្នំពេញ
				{else}
					Place order
				{/if}
				</c>
				<c class="text-info">{$table['name']}</c>
				<input type="hidden" id="table_id" value="{$table['id']}" />
			</div>
			<div class="col-1 dropdown" style="line-height: 50px;" >
			    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown">
			      <c class="text-primary">
			      {if $language==1}中文{elseif $language==2}ភ្នំពេញ{elseif $language==3}English{/if}</c>
			    </button>
			    <ul class="dropdown-menu" style="line-height:30px;">
			      <li><a href="/index.php/order/add/language/1" class="dropdown-item" >中文</a></li>
			      <li><a href="/index.php/order/add/language/2" class="dropdown-item" >ភ្នំពេញ</a></li>
			      <li><a href="/index.php/order/add/language/3" class="dropdown-item" >English</a></li>
			    </ul>
			</div>
		</div>

		<div id="content"  style="margin-top:50px;">
			<div id="cat_list">
				<ul class="list-group" style="margin: 10px 0; border-radius: 0;">
					{foreach $cat as $c}
					<li class="list-group-item cat_item" cat="{$c['id']}" fid="{$c['fid']}" style="padding: 5px 0;text-align: center;">
						{if $language==1}
							{$c['name']} 
						{elseif $language==2} 
							{$c['name2']}
						{else}
							{$c['name3']}
						{/if}
					</li>
					{/foreach}
				</ul>
				<div style="height: 150px;color:#ccc;">...end...</div>
			</div>

			<div  style="margin-left: 25%;padding: 0;display: flex;flex-direction: row;flex-wrap: wrap; justify-content:space-around;">
				{foreach $data as $d}
				  <div class="card" cat="{$d['cat']}" gid="{$d['id']}" gname="{$d['name']}" gname2="{$d['name2']}" gname3="{$d['name3']}" price="{$d['price']}">
				  	{if $d['recom']}
				  		<div class="tj">{$d['recom']}</div>
				  	{/if}
				  	<table>
				  		<tr>
				  			<td style="vertical-align:initial;width: 90px;padding: 5px;position: relative;">
				  				<img class="goods_image" src="{$d['imgs']} " style="width:90px;border-radius: 5px;" />
				  				<div class="price">${$d['price']}</div>
				  			</td>
				  			<td>
				  				{if $language==1}
								<div class="text-primary">{$d['name']}</div>
								{elseif $language==2}
								<div class="text-primary">{$d['name2']}</div>
								{else}
								<div class="text-primary">{$d['name3']}</div>								
								{/if}
								<div class="text-info text-wrap">{$d['title']}</div>
								<div style="color:#f90;">销量：{$d['sale_num']}份</div>
								<div style="color:#f90;">推荐：{$d['recom_num']}次</div>
								

								<c style="position: absolute;right:4px;bottom: 4px;font-size:larger;color:#f60 ;transform: scale(1.2);">
									<span class="cart_add bi-plus-circle"></span>
								</c>
							</td>
				  		</tr>
				  	</table>
				  </div>
				{/foreach}
			</div>
			<div class="col-1"></div>
		</div>

		<div style="height:95px;text-align:center;color:#f7f7f7"> ------end------</div>

		<div id="to_top" style="background-color: #fff;border-radius: 50%;width:36px;height:36px;position:fixed;z-index:15;right:19px;bottom:60px;display:none;">
			<span class="bi-arrow-up-circle" style="font-size: 36px;line-height: 36px;"></span>
		</div>

	<!-- 订单商品列表 -->
	<div style="background-color: #fff;position:fixed;width:100%;max-width: 800px;bottom:50px;left:0;z-index: 20;">
		<table class="table table-sm table-striped" id="goods_list" style="width: 100%;display: none;border-top:1px solid #555;">
		</table>
	</div>
	<style type="text/css">

	</style>
	<div id="cart" class="row">
		<!-- 购物车显示区 -->
			<div class="col-2" style="position: relative;vertical-align: middle;">
				<span class="bi-cart" style="font-size: 1.5em;color:#55f;"></span>
				<span id="cart_num">0</span>
			</div>

			<div class="col-8">
				<a href="/index.php/order/my_order">
					<span class="bi-list-ul" style="font-size: 1.5em;color:#55f;"></span>
				</a>
			</div>

			<div class="col-2" >
				<span class="bi-cart-check" style="font-size: 1.5em;color:#55f;" id="order_submit" ></span>
			</div>

	</div>
</div>
<script type="text/javascript">

	$(document).ready(function(){

		var gtemp = [];
		var op=true;

		//显示图片
		$(".goods_image").on('click',function(){
			var img = $(this).attr('src');
			if(!img.trim()) return;
			//layer.alert("<img src='"+img+"' style='width:100%'");
			//页面层

			layer.open({
			  type: 1,
			  title:'',
			  closeBtn: 0, 
			  //anim: 3,
			  time: 5*1000,
			  shadeClose: true, //开启遮罩关闭			  
			  skin: 'layui-layer-rim', 
			  content: "<img src='"+img+"' style='width:100%'>"
			});
		})

		
		$("span").on('click',function(){
			//$(this).animate({fontSize:'2em',borderWidth:"1px"},"fast").animate({fontSize:'1em',borderWidth:'0'},"fast");			
		})

		//分类显示东西
		$(".cat_item").on('click',function(e){
			var cat = $(this).attr('cat');
			$(".cat_item").removeClass("item-select");
			$(this).addClass("item-select");

			if(cat=='1'){
				$(".card").show();
			}else{

				var cat_arr =[cat*1];
				getChildren(cat,cat_arr);

				$(".card").hide().each(function(){
					var el = $(this);
					//console.log(cat_arr);
					//console.log(el.attr('cat'));
					//console.log($.inArray(el.attr('cat')*1,cat_arr));

					if($.inArray(el.attr('cat')*1,cat_arr)>=0){
						el.show();
					}
				})
			}

		});

		//找出子类,只找一个下级
		function getChildren(id,arr){
			$(".cat_item").each(function(){
				var cat =$(this).attr('cat');
				if($(this).attr('fid')==id){
					arr.push(cat*1);
				}
				//getChildren(cat,arr);

			})
			
		}

		//收缩已选商品列表
		$("#cart").on('click','.bi-cart,#cart_num',function(e){
			$("#mask").show();
			$("#goods_list").show();
			if(!gtemp.length) layer.msg('空空如也！');
			
		});
		$("#mask").on('click',function(e){
			$(this).hide();
			$("#goods_list").hide();
		})


		//选购
		$(".bi-plus-circle").on('click',function(e){
			if(!op) {
				layer.msg('please wait!');
				return false;
			}

			op = false; //防止连续点击
			$(this).animate({fontSize:'2em'},"fast").animate({fontSize:'1em'},"fast");
			$(".bi-cart").animate({fontSize:'2em'},"fast").animate({fontSize:'1.5em'},"fast");
			var el = $(this).parents('.card');
			var name = el.attr('gname');
			var name2 = el.attr('gname2');
			var gid = el.attr('gid');
			var price = el.attr('price');

			var goods ={'name':name,'name2':name2,'id':gid,'num':1,'price':price*1,'total':price*1};
			//console.log(goods);

			//重复处理
			var ex = false;
			for(var i = 0;i<gtemp.length;i++){
				if(goods.id===gtemp[i].id){
					gtemp[i].num++;
					gtemp[i].total += goods.price;
					ex=true;
				}
			}

			if(!ex){gtemp.push(goods);}

			add_cart($(this),e,$("#cart_num"));
			refreshGoods();

			op=true;
					
		});

		//加购物车动画
		//在原来的图片位置生成一个框，把框移动到购物车的位置，在消掉。
		function add_cart(el,event,tar){
			var img = el.parents('tr').find('img');
			var img2 = img.clone();
			var pos=img.offset();

			$('body').append(img2);
			var sx = event.clientX-220;
			var sy = event.clientY-70;
			var tx = tar.offset().left;
			var ty = $(window).height()-50;

			img2.css({
				'border':'1px solid #f00',
				'position':'fixed',
				'zIndex':'20',
				'top':sy+"px",
				'left':sx+'px'})
			.animate({
			    'left':tx+'px',
			    'top':ty+'px',
			    'height':'1px',
			    'width':'1px',
			  },'slow',function(e){
			  	img2.remove();
			  });

		}




		//删商品
		$('#goods_list').on('click','.bi-dash-circle',function(e){
			var et = e.target;
			var gg = $(et).parents('tr');
			var gname = gg.attr('gname');

			for(var i=0;i<gtemp.length;i++){
				if(gtemp[i].name==gname){
					gtemp.splice(i,1);
					break;
				}
			}
			refreshGoods();

		})

		//刷新购物车显示
		function refreshGoods(){
			$("#goods_list").html('<tr style="border-bottom:1px solid #ccc;"><td>No.</td><td>Item</td><td>Count</td><td>Price</td><td>Total</td><td></td></tr>');
			//console.log(gtemp);
			var total =0;
			var count=0;
			var el='';
			for(var i=0;i<gtemp.length;i++){
				total+=gtemp[i].price*1;
				count+=gtemp[i].num;
					el+= "<tr gname='"+gtemp[i].name+"'>";
					el+= "<td>"+(i*1+1)+"</td>";
					el+= "<td>"+gtemp[i].name+ "<br/>"+gtemp[i].name2+"</td>";
					el+= "<td>x"+gtemp[i].num+ "</td>";
					el+= "<td>"+(gtemp[i].price*1)+ "</td>";
					el+= "<td>"+ (gtemp[i].total*1).toFixed(2)+"</td>";
					el+= "<td><span class='bi-dash-circle'></span></td>";
					el+= "</tr>";
				//$("#goods_list").append(el);
			}
			$("#cart_num").html(count);
			if(count==0){
				$("#goods_list").html('');
			}else{
				$("#goods_list").append(el+'<tr style="border-top:1px solid #ccc;"><td></td><td>Total:</td><td>'+count+'</td><td></td><td>'+total.toFixed(2)+'</td><td></td></tr><br/>');
			}
			
		}

		//清空购物车
		$("#cart_clean").on('click',function(e){
			if(!gtemp.length) {
				layer.msg('What do you want?');
				e.preventDefault(); //阻止冒泡
				return;
			}

			//询问框
		    layer.confirm('Want to clear the cart?', {
		      btn: ['Yes','No'] //按钮
		    }, function(){
				gtemp=[];
				$("#goods_list").html('');
				$("#cart_num").html('0');
				layer.msg('Cart is clean!');

		    }, function(){
		    	layer.msg('yes');
		      	return false;
		    });
		    e.preventDefault(); //阻止冒泡
		})


		//订单提交
		$("#order_submit").on('click',function(e){
		    if(!gtemp.length) {
		    	layer.msg('What do you want?');
		    	e.preventDefault(); //阻止冒泡
		    	return;
		    }

		    //询问框
		    $("#goods_list").show();
		    layer.confirm('是否确定提交订单?', {
		      btn: ['Yes','No'] //按钮
		    }, function(){
		    	var order ={data:gtemp,table:$("#table_id").val()};
		    	$.ajax({
		    		url:'/index.php/order/add',
		    		type:'post',
		    		data:order,
		    		success:function(res){
		    			if(res.code){
		    				layer.msg('Order submit successed!');
							$("#goods_list").html('');
							$("#cart_num").html('0');	
							gtemp=[];
    				
		    			}else{
		    				layer.msg(res.msg);
		    			}
		    				
		    		},
		    		fail:function(res){
		    			layer.msg(res.code+'Order submit failed!');
		    		}
		    	});

				e.preventDefault(); 
				
		    }, function(){
		    	$("#goods_list").hide();
		    	layer.msg('yes');
		    	return false;
		    	e.preventDefault(); //阻止冒泡
		    });		    

		})

		$("#to_top").on('click',function(){
			$(window).scrollTop(0,0);	
		})

        $(window).scroll(function(){
             var value=$('html').scrollTop();
             if(value>500){
               $('#to_top').fadeIn(500);
             }else{
              $('#to_top').fadeOut(500);
             }
         });



	});
</script>
</body>
</html>